<?xml version="1.0" encoding="UTF-8"?>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="./css/template.css" />
        <link type="text/css" rel="stylesheet" href="./css/SyntaxHighlighter.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Java Server Faces</title>
        <meta name="�Keywords�" content="�JSF," java="Java" server="Server" faces="Faces" studio="studio" creator="creator" />
        <script language="javascript" src="./js/shInit.js" />
        <script language="javascript" src="./js/shCore.js" />
        <script language="javascript" src="./js/shBrushCpp.js" />
        <script language="javascript" src="./js/shBrushCSharp.js" />
        <script language="javascript" src="./js/shBrushCss.js" />
        <script language="javascript" src="./js/shBrushDelphi.js" />
        <script language="javascript" src="./js/shBrushJava.js" />
        <script language="javascript" src="./js/shBrushJScript.js" />
        <script language="javascript" src="./js/shBrushPhp.js" />
        <script language="javascript" src="./js/shBrushPython.js" />
        <script language="javascript" src="./js/shBrushRuby.js" />
        <script language="javascript" src="./js/shBrushSql.js" />
        <script language="javascript" src="./js/shBrushVb.js" />
        <script language="javascript" src="./js/shBrushXml.js" />
        <author />
    </head>
    <body>
        <div class="chapter">
            <h1>Java Server Faces</h1>
            <div class="subChapter">
                <h2>Introduction</h2>
                La technologie JavaServer Faces  (JSF) est un composant du framework JAVA
				permettant la conception d'interface graphique web côté serveur.
				Les composants principaux de la technologie de JSF sont les suivant :
                <br />
                   
				- Une API fournissant aux développeurs une palette d'outils leur permettant
				d'implémenter et contrôler des composant UI tout en respectant un modèle bien
				précis.
                <br />
                   
				- Deux bibliothèques permettant d'implémenter les composants UI dans une page JSP
                <br />
                <br />
                <br />
                JSF vous permet :
                <br />
                   
				- La gestion de l'état des composants entre requêtes
                <br />
                   
				- La gestion des navigateurs web
                <br />
                   
				- Le traitement des formulaires et leur validation
                <br />
                   
				- l'implémentation d'évènements graphiques
                <br />
                   
				- La conversion des types primitifs provenant des données d'application vers des
				objets de plus haut niveau
                <br />
                <br />
                <br />
                Pour vous permettre de développer des JSF je vous conseil d'aller télécharger le
				pack complet
                <a href="http://javashoplm.sun.com/ECom/docs/Welcome.jsp?StoreId=22&amp;PartDetailId=j2eesdk-1.4-oth-JPR&amp;SiteId=JSC&amp;TransactionId=noreg" target="_blank">J2EE SDK</a>
                de SUN
				ainsi que l'IDE
                <a href="http://developers.sun.com/prodtech/javatools/jscreator/index.jsp" target="_blank">Sun Java Studio Creator</a>
                <br />
                <br />
            </div>
            <div class="subChapter">
                <h2>1. Le cycle de vie d'une page JSF</h2>
                <h3>1.1. Interface Utilisateur / Serveur</h3>
                Le schéma suivant montre le fonctionnement d'une interface utilisateur créée avec JSF.
                <p align="center">
                    <img src="images/11.gif" border="0" />
                </p>
                Le navigateur accède à la page JSP du serveur.
				Le serveur crée alors les composants et les renvoies au navigateur.
                <br />
                <h3>1.2. Analyse de la vie d'une page JSF</h3>
                Lors de la demande de la page par le navigateur, le processeur JSF
				construit un arbre de contrôles serveurs constitué de l'ensemble des
				widgets utilisées par les formulaires HTML.
                <p align="center">
                    <img src="images/12.gif" border="0" />
                </p>
                <br />
                Lors de la validation du formulaire, le serveur
				reconstitue l'arbre des contrôles et stocke les valeurs de la "Requête"
				dans chaque composant graphique. L'opération suivante consiste à
				parcourir l'arbre des contrôles afin de détecter une éventuelle modification.
				Pour ce faire, le serveur compare les valeurs actuelles de chaque composant à
				celles mémorisées dans la session de l'utilisateur à l'instant t-1. En cas de modification, un évènement est déclenché
				automatiquement par le Framework et l'utilisateur a la possibilité de le gérer
				afin d'interagir directement avec l'arbre des contrôles. La dernière étape
				consiste à mettre à jour le modèle de présentation et à générer la réponse HTML
				en fonction de la hiérarchie des composants.
            </div>
            <div class="subChapter">
                <h2>2. JSF et Sun Java Studio Creator</h2>
                <br />
                Nous allons voir comment créer votre première application Web à l'aide de Sun Java Studio Creator
				ainsi que les différents outils mis à la disposition du développeur.
                <br />
                <h3>2.1. Création d'une application web</h3>
                Lancez Sun Java Studio Creator, puis cliquez sur File -&gt; New project.
                <br />
                <p align="center">
                    <img src="images/21.gif" border="0" height="152" width="342" />
                </p>
                <p>Vous obtiendrez alors la fenêtre suivante</p>
                <p align="center">
                    <img src="images/22.gif" border="0" height="300" width="492" />
                </p>
                <p>
                    Sélectionnez le type de projet J2EE Web Application. Donnez un nom au projet,
					ici Helloword. Une fois validé, Sun Java Studio Creator va
					créer les fichiers nécessaires.
                    <br />
                </p>
                <h3>2.2. Palette</h3>
                La palette va vous permettre de lister tous
				les composants disponibles et de faire ensuite du drag'n'drop de ces
				composants sur votre pages JSP.
                <p align="center" />
                <p align="center">
                    <img src="images/23.gif" border="0" />
                </p>
                Les composants typiques d'une application web sont listés dans ce menu.
                <br />
                <h3>2.3. Propriété des composants</h3>
                Vous pouvez accéder à tous moments aux propriétés de vos composants en
				cliquant dessus. Les propriétés du composants sont alors affichées dans
				le menu "Properties".
                <p align="center">
                    <img src="images/24.gif" border="0" />
                </p>
                Vous pouvez ainsi modifier les propriétés du composant sélectionné.
                <br />
                <h3>2.4. Explorateur de Projet</h3>
                L'explorateur de projet ("Project Navigator") va vous permettre de voir tous les fichiers associés.
                <br />
                <br />
                Dans le "Project Navigator" de votre projet "Helloword", vous pouvez voir les fichiers crées par Sun Java Studio Creator.
                <br />
                <p align="center">
                    <img src="images/25.gif" border="0" />
                </p>
                <br />
                <h3>2.5. Premier Exemple</h3>
                Nous allons maintenant continuer l'application "Helloword" qui affichera dans une page JSP "HelloWord".
                <h4>2.5.1. Analyse de la page JSP</h4>
                Vous avez dans l'affichage de votre Form deux boutons.
                <br />
                <p align="center">
                    <img src="images/26.gif" border="0" />
                </p>
                <br />
                Le bouton "Design" va vous permettre d'accéder au mode visuel et le
				bouton "source" vous permet d'accéder au code source de votre Form.
                <br />
                <h4>2.5.2. Helloword</h4>
                Pour afficher la chaine de caractère "Helloword" dans notre Form, nous allons utiliser le composant "Output Text".
                <br />
                <br />
                Pour cela, allez dans la "Palette" et sélectionnez le composant "Output Text" puis insérez le dans le form.
                <br />
                <p align="center">
                    <img src="images/28.gif" border="0" />
                </p>
                <br />
                Par défaut, ce composant n'a aucune valeur, Pour modifier cette valeur modifier le champs "value" dans "Properties".
                <br />
                <p align="center">
                    <img src="images/27.gif" border="0" />
                </p>
                <p align="center">
                    <br />
                    Pour lancer l'application il suffit d'appuyer sur la touche "F6".
					L'application sera alors déployée et vous pourrez y accéder à l'adresse
					suivante:
                    <br />
                    http://localhost:8081/Helloword/
                </p>
            </div>
            <div class="subChapter">
                <h2>3. Les composants Web</h2>
                Tous les composants dérives de la classe "javax.faces.component.html".
				Dans ce chapitre, nous allons présenter un certain nombre de
				composants.
                <h3>3.1. Composant Output Text</h3>
                L'ajout d'un composant OutputText se fait par l'insertion dans le code source de la page JSP par:
                <p>
                    <i>
                        <span style="background-color: rgb(128, 128, 128);">&lt;
							h:outputText binding="#{Page1.outputText1}" escape="true"
							id="outputText1" style="position: absolute; left: 144px; top: 120px"
							value = "" /&gt;"</span>
                    </i>
                </p>
                <p>
                    - le champ id correspond au nom du composant
                    <br />
                    - le champ value correspond à la valeur du composant
                </p>
                - le champ style correspond à la position du composant dans la page
                <br />
                <p>
                    voici quelques méthodes du composant implémentable dans le .java associé à la
					JSP.
                    <br />
                </p>
                <table style="border-collapse: collapse;" bgcolor="#ffffff" border="2" bordercolor="#111111" cellpadding="0" cellspacing="0" width="90%">
                    <tbody>
                        <tr>
                            <td align="center" bgcolor="#808080" width="27%">
                                <b>setValue(Object value)</b>
                            </td>
                            <td width="73%">permet de donner une valeur</td>
                        </tr>
                        <tr>
                            <td align="center" bgcolor="#808080" width="27%">
                                <b>setStyle(String style)</b>
                            </td>
                            <td width="73%">permet de donner la valeur de la propriété style</td>
                        </tr>
                        <tr>
                            <td align="center" bgcolor="#808080" width="27%">
                                <b>getID()</b>
                            </td>
                            <td width="73%">permet d'obtenir l'identifiant du composant</td>
                        </tr>
                        <tr>
                            <td align="center" bgcolor="#808080" width="27%">
                                <b>getValue()</b>
                            </td>
                            <td width="73%">permet d'obtenir la valeur du composant</td>
                        </tr>
                    </tbody>
                </table>
                <h3>3.2. Composant Button</h3>
                L'ajout d'un composant Button se fait par l'insertion dans le code source de la page JSP par:
                <p>
                    <textarea name="code" class="java">&lt;h:commandButton action="#{Page1.button1_action}" binding="#{Page1.button1}"
						id="button1"... ...value="Submit"/&gt;</textarea>
                </p>
                <p>
                    - le champ id correspond au nom du composant
                    <br />
                    - le champ action correspond au  nom de la fonction appelée lors du
					clic sur le bouton. Ici Page1.button1_action();
                    <br />
                    - le champ option value permet de déterminé l'action du bouton
                    <br />
                    <br />
                    <b>Exemple 1 :</b>
                    afficher dans un composant OutputText un message après avoir cliqué sur un bouton.
                    <br />
                    <br />
                    - Ajouter un bouton dans le Form.
                    <br />
                    - Ajouter un OutputText dans le Form en ne lui donnant pas de valeur.
                    <br />
                    - Ajouter une fonction permettant la gestion du clic sur le bouton:
                </p>
                <p>
                    <textarea name="code" class="java">
                        public String button1_action() {
                        <br />
                        <br />
                        outputText1.setValue("toto");
                        <br />
                        return null;}
                        <br />
                         
                    </textarea>
                </p>
                <p>
                    Lors du clic sur le bouton, le composant outputText prend la valeur "toto".
                    <br />
                </p>
                <h3>3.3. Composant Text Field</h3>
                L'ajout d'un composant Text Field se fait par l'insertion dans le code source de la page JSP par:
                <p>
                    <textarea name="code" class="java">&lt;h:inputText binding="#{Page1.textField1}"
						...&gt;</textarea>
                </p>
                <p>
                    <b>Exemple 2:</b>
                    Récupérer le texte taper dans un text Field
                </p>
                <p>Pour cela on repart de l'exemple 1 et on utilise la méthode getValue() du
					textField.</p>
                <p>On obtient le code java suivant:</p>
                <textarea name="code" class="java">
                    <table style="border-collapse: collapse;" bgcolor="#808080" border="1" bordercolor="#111111" cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td width="100%">
                                    <br />
                                    public String button1_action() {
                                    <br />
                                    <br />
                                    outputText1.setValue(textFiel1.getValue());
                                    <br />
                                    return null;}
                                    <br />
                                     
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </textarea>
                <h3>3.2. Liste de tous les composants</h3>
                <p>voici un tableau récapitulatif des composants disponibles les plus utilisés</p>
                <table style="border-collapse: collapse;" border="1" bordercolor="#111111" cellpadding="0" cellspacing="0" height="417" width="90%">
                    <tbody>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Nom du composant</b>
                            </td>
                            <td align="center" height="19" width="33%">
                                <b>tag de la page jsp</b>
                            </td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">
                                <b>description</b>
                            </td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Output Text</b>
                            </td>
                            <td align="center" height="19" width="33%">outputText</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Zone de texte</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Hyperlink</b>
                            </td>
                            <td align="center" height="19" width="33%">outputLink</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Lien</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Image</b>
                            </td>
                            <td align="center" height="19" width="33%">graphicImage</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Image</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Text Field</b>
                            </td>
                            <td align="center" height="19" width="33%">inputText</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Zone de saisie
								de texte</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Multi Line Text Area</b>
                            </td>
                            <td align="center" height="19" width="33%">inputTextarea</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Zone de texte
								sur plusieures lignes</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Button</b>
                            </td>
                            <td align="center" height="19" width="33%">commandButton</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Bouton</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Link Action</b>
                            </td>
                            <td align="center" height="19" width="33%">commandLink</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Bouton de lien</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>DropDown List</b>
                            </td>
                            <td align="center" height="19" width="33%">selectOneMenu</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Liste
								Déroulante</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>ListBox</b>
                            </td>
                            <td align="center" height="19" width="33%">selectOneListbox</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">TextBox
								permettant le choix de plusieures option</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Multi Select ListBox</b>
                            </td>
                            <td align="center" height="19" width="33%">selectManyListbox</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">idem que
								ListBox</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Data Table</b>
                            </td>
                            <td align="center" height="19" width="33%">dataTable</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">tableau de zone
								de texte</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>CheckBox</b>
                            </td>
                            <td align="center" height="19" width="33%">selectBooleanCheckbox</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Case à cocher</td>
                        </tr>
                        <tr>
                            <td bgcolor="#808080" height="19" width="33%">
                                <b>Hidden Field</b>
                            </td>
                            <td align="center" height="19" width="33%">inputHidden</td>
                            <td align="center" bgcolor="#c0c0c0" height="19" width="34%">Champs caché</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="subChapter">
                <h2>4. Navigation.xml</h2>
                Cette fonctionnalité vous permettra de naviguer d'une page à l'autre.
                <p>Dans
					Sun Java Studio Creator, effectuez un clic droit et sélectionnez Page
					Navigator. Une nouvelle fenêtre s'ouvre. Vous pouvez alors ajouter une
					nouvelle page et la relier à la précédente. Une fois après
					avoir donné un nom à l'association, il suffit de modifier le code
					d'action du bouton de la première page.</p>
                <p align="center">
                    <img src="images/41.gif" border="0" />
                </p>
                <table style="border-collapse: collapse;" bgcolor="#808080" border="1" bordercolor="#111111" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td width="100%">
                                <br />
                                public String button1_action() {
                                <br />
                                <br />
                                return "monAction";}
                                <br />
                                 
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p>Lors du clic sur le bouton, vous accéderez à la seconde page.</p>
                <h2>Conclusion</h2>
                Cet article vous montre une approche de la technologie Java Server Faces. Cette
				technologie n'en est encore qu'à ses premiers balbutiements, en effet on constate de
				nombreuses imperfections, une complexité encore élevé et de nombreuse critiques
				de la part de la communauté Java. Cependant, les WebForm de Microsoft ne sont
				désormais plus le seul modèle évènementiel basé sur la notion de composants
				graphiques réutilisables, relançant ainsi les technologies employées dans le
				déploiement d'application web. Java Server Faces, dans son avenir, promet aux
				développeurs web JAVA une plus grande facilité de développement.
            </div>
        </div>
    </body>
</html>

